<template>

    <div class="main">
        <van-nav-bar title="发布文章" left-text="" right-text="发布" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight" />
        <div class="my_main">
            <div class="my_title">
                <input type="text" placeholder="标题" maxlength="40" v-model="main_title"
                    style="border: 0;width: 100%;height:100%;font-size: 18px; ">

            </div>
            <div class="my_content">
                <textarea placeholder="内容" v-model="main_content"
                    style="width: 100%;height: 100%;border: 0;resize: none;" cols="30" rows="10"></textarea>

            </div>
            <div class="my_di">
                <div class="my_sel">
                    <div class="my_quan" @click="dian_quan()">
                        <span style="color: red;font-size: 13px; padding: 5px;">{{now_is_sel}}</span>
                    </div>

                    <div class="my_tu" is-link @click="file_cilck">
                        <van-icon name="photo-o" size="30px" />
                        <span v-show="sel_num">已选择({{sel_num}})</span>
                        <input type="file" hidden multiple ref="file" @change="gaibian()">

                    </div>
                </div>
            </div>
        </div>


        <van-popup v-model:show="show" position="right" :style="{ width:'100vw',height: '100vh' }">
            <div>
                <van-nav-bar title="选择手工圈" right-text="完成" @click-left="onClickLeft" @click-right="onClickRight1" />
                <div class="sel_quan">
                    <span style="font-size: 14px;color: rgb(198, 198, 198);">只能发布到一个圈子</span>
                    <div class="xuan_lei">
                        <!-- <van-space> -->
                        <div style="display: inline-block; margin:10px 27px;" v-for="(item,index) in all_list"
                            :key="index">
                            <van-button type="default" @click="sel_one(index)" :class="{xuan:is_sel_index === index}">
                                {{item}}
                            </van-button>
                        </div>

                        <!-- </van-space> -->

                    </div>
                </div>
            </div>
        </van-popup>



    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import Product from "@/api/main";
import { Toast } from "vant";
import 'vant/es/toast/style';



const _product = new Product()
const router = useRouter()
const route = useRoute()


let now_is_sel = ref('选择发布圈子')


//上标签 返回 和发布的点击事件
const onClickLeft = () => history.back();
// history.back();
const onClickRight = () => {
    console.log('标题是', main_title.value);
    console.log('内容是', main_content.value);
    console.log('图片个数', sel_num.value);
    console.log('标签', now_is_sel.value);
    if (main_title.value == '') {
        Toast('请填写标题')
    } else if (main_content.value == '') {
        Toast('请填写内容')
    }
    else if (now_is_sel.value == '选择发布圈子') {
        Toast('请选择圈子')
    } else {
        console.log('发送成功');
        let fa_product = {
            new_p_tittle: main_title.value,
            new_p_content: main_content.value,
            new_p_label: now_is_sel.value
        }
        _product.publishtuwen(fa_product).then(res => {
            Toast.success({
                message: res.data.msg,
                duration: 2000
            })
        })

    }

};
//定义文件信息
let file: any = ref(null)
let sel_num = ref(0) //选择图片的数量
let f_ipt: any = []
//标题
var main_title = ref("")
//内容
var main_content = ref("")

//选择圈子
function dian_quan() {
    show.value = true;
    // console.log("11111");
    // router.push({
    //     name: "selquan"
    // })
}
//选择图片
function file_cilck() {
    file.value.click()
}
function gaibian() {
    sel_num.value = file.value.files.length
    // console.log(typeof (sel_num) == "number");
}

//模态框
const show = ref(false);
//模态框内容
const onClickRight1 = () => {
    show.value = false;
    // console.log(all_list[is_sel_index.value]);
    // if(now_is_sel.value){

    // }
    now_is_sel.value = all_list[is_sel_index.value]
    console.log(now_is_sel.value == undefined);
    if (now_is_sel.value == undefined) {
        now_is_sel.value = '选择发布圈子'
    }

}
var is_sel_index = ref(-1)

//按钮数据
let all_list = [
    "布艺",
    "皮艺",
    "木艺",
    "发饰",
    "刺绣",
    "剪纸"
]

function sel_one(index: any) {
    console.log(index);
    is_sel_index.value = index

}


</script>

<style scoped>
.is_show {
    display: inline-block;
}

.no_show {
    display: none;
}

.main {
    width: 100vw;
    height: 100vh;
}

.my_main {
    width: 100vw;
    height: 93%;
    display: flex;
    flex-direction: column;
}

.my_title {
    flex: 1;
    /* border: 1px solid red; */
    padding: 2px;
    border-bottom: 1px solid rgb(228, 228, 228);
}

.my_content {
    flex: 8;
    padding: 5px;
}

.my_di {
    flex: 1;
    padding-left: 5px;
    /* border: 1px solid red; */
    position: relative;
}

.my_sel {
    position: absolute;
    bottom: 10px;
    padding-left: 10px;
    /* background-color: rosybrown; */
    width: 90%;
    height: 50%;
    display: flex;
    justify-content: space-between;

}

.my_quan {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid red;
}

.my_tu {
    width: 100px;
    height: 30px;
    /* border: 1px solid red; */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;

}


/* 模态框样式 */
.sel_quan {
    padding: 10px;
    height: 89.5vh;
    background-color: rgb(243, 243, 243);
    /* border: 1px solid red; */
}

.xuan {
    border: 1px solid red;
}

.xuan_lei {
    width: 94vw;
    /* display: flex; */
    /* justify-content: space-around; */
    /* height: 1vh; */
    /* display: flex; */
    /* border: 1px solid red; */
}

:deep(.van-nav-bar .van-icon) {
    color: rgb(205, 205, 205);
}

:deep(.van-nav-bar__text) {
    color: #EE0A24;
}
</style>